<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link type="text/css" th:href="@{/css/css_x/findpword/css.css}" rel="stylesheet" />
</head>

<body>
 
  <div class="content">
   <div class="web-width">
     <div class="for-liucheng">
      <div class="liulist for-cur"></div>
      <div class="liulist"></div>
      <div class="liulist"></div>
      <div class="liulist"></div>
      <div class="liutextbox">
       <div class="liutext for-cur"><em>1</em><br /><strong>填写邮箱</strong></div>
       <div class="liutext"><em>2</em><br /><strong>验证身份</strong></div>
       <div class="liutext"><em>3</em><br /><strong>设置新密码</strong></div>
       <div class="liutext"><em>4</em><br /><strong>完成</strong></div>
      </div>
     </div><!--for-liucheng/-->
     <form th:action="@{/f/t/finpt}" method="get" class="forget-pwd" onsubmit="return check()">
         <input type="hidden" id ="verify" value="" name="vaeify">
         <div id="sc">

         </div>
       <dl>
        <dt>邮箱：</dt>
        <dd><input type="text" name="email" id="email" placeholder="请输入邮箱"/></dd>
        <div class="clears"></div>
       </dl> 
       <dl>
        <dt>验证码：</dt>
        <dd>
         <input type="text" name="verify1" id="verify1" value="" placeholder="验证码"/>
         <div class="yanzma">
             <canvas id="canvas"  width="100" height="40" ></canvas>
             <a href="#" id="changeImg">换一张</a>
         </div>
        </dd>
        <div class="clears"></div>
       </dl>
       <div class="subtijiao"><input type="submit" value="提交" /></div>
      </form><!--forget-pwd/-->
   </div><!--web-width/-->
  </div><!--content/-->
  
</body>

<script type="text/javascript">
    var arry;
    var mailreg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
    function check() {
        if (email.value == "" || email.value==null){
            alert("邮箱不能为空");
            return false;
        }
        if(mailreg.test(email)){
            alert("输入邮箱格式错误！");
            return false;
        }
        if(verify1.value!=arry){
            alert("验证码错误！");
            return false;
        }

    }
    /**生成一个随机数**/
    function randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }
    /**生成一个随机色**/
    function randomColor(min, max) {
        var r = randomNum(min, max);
        var g = randomNum(min, max);
        var b = randomNum(min, max);
        return "rgb(" + r + "," + g + "," + b + ")";
    }
    drawPic();
    document.getElementById("changeImg").onclick = function(e) {
        e.preventDefault();
        drawPic();
    }

    /**绘制验证码图片**/
    function drawPic() {
        var canvas = document.getElementById("canvas");
        var width = canvas.width;
        var height = canvas.height;
        var ctx = canvas.getContext('2d');
        ctx.textBaseline = 'bottom';

        /**绘制背景色**/
        ctx.fillStyle = randomColor(180, 240); //颜色若太深可能导致看不清
        ctx.fillRect(0, 0, width, height);
        /**绘制文字**/
        var str = '0123456789';
        var arr = new Array();
        for(var i = 0; i < 4; i++) {
            var txt = str[randomNum(0, str.length)];

            arr[i]=txt;
            ctx.fillStyle = randomColor(50, 160); //随机生成字体颜色
            ctx.font = randomNum(15, 40) + 'px SimHei'; //随机生成字体大小
            var x = 10 + i * 25;
            var y = randomNum(25, 45);
            var deg = randomNum(-45, 45);
//修改坐标原点和旋转角度
            ctx.translate(x, y);
            ctx.rotate(deg * Math.PI / 180);
            ctx.fillText(txt, 0, 0);
//恢复坐标原点和旋转角度
            ctx.rotate(-deg * Math.PI / 180);
            ctx.translate(-x, -y);
        }
        arry = arr[0]+arr[1]+arr[2]+arr[3]
        document.getElementById("verify").value = arry;
        /*alert(arry)*/
        /**绘制干扰线**/
        for(var i = 0; i < 8; i++) {
            ctx.strokeStyle = randomColor(40, 180);
            ctx.beginPath();
            ctx.moveTo(randomNum(0, width), randomNum(0, height));
            ctx.lineTo(randomNum(0, width), randomNum(0, height));
            ctx.stroke();
        }
        /**绘制干扰点**/
        for(var i = 0; i < 100; i++) {
            ctx.fillStyle = randomColor(0, 255);
            ctx.beginPath();
            ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI);
            ctx.fill();
        }
    }
    //html 生成文本框的里面的字默认 点击后消失

    function operA(obj) {

        obj.value = "";

    }
</script>
</html>
